<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<template>
				<!-- 添加按钮 -->
				<el-button  @click="showaddCateDialog" type="primary">添加分类</el-button>
				<!-- 表格数据 -->
				<tree-table class="treeTable" :show-row-hover='false' border index-text='#' :show-index='true'
					:expand-type="false" :selection-type='false' :columns="columns" :data="catelist">
					<!-- 是否有效 -->
					<template slot-scope="scope" slot="isok">
						<i style="color: lightgreen;" v-if="scope.row.cat_deleted===false" class="el-icon-success"></i>
						<i style="color: red;" v-else class="el-icon-error"></i>
					</template>
					<!-- 排序 -->
					<template slot-scope="scope" slot="order">
						<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
						<el-tag size="mini" v-else-if="scope.row.cat_level===1" type="success">二级</el-tag>
						<el-tag size="mini" v-else type="warning">三级</el-tag>
					</template>
					<!-- 操作 -->
					<template slot-scope="scope" slot="opt">
						<el-button type="primary" @click="showEditDialong(scope.row.cat_id)" size="mini" icon="el-icon-edit">编辑</el-button>
						<el-button type="danger" @click="removeUserById(scope.row.cat_id)" size="mini" icon="el-icon-delete">删除</el-button>
					</template>
				</tree-table>
				<!-- 分页区 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="querInfo.pagenum" :page-sizes="[3, 5, 10, 15]" :page-size="querInfo.pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</template>
		</el-card>
		<!-- 添加对话框 -->
		<el-dialog @close="addCateDialogClose" title="添加分类" :visible.sync="addCateDialogVisible" width="50%">
			<!-- 添加内容表单 -->
			<el-form :model="addcateform" :rules="addcateformRules" ref="addcateformRef" label-width="100px">
				<el-form-item label="分类名称:" prop="cat_name">
					<el-input v-model="addcateform.cat_name"></el-input>
				</el-form-item>
				<el-form-item label="父级分类:">
					<el-cascader clearable change-on-select v-model="selectedKeys" :options="parentCateList" :props="cascaderProps"
						@change="parentCateChange"></el-cascader>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCateDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCate">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改分类" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="editForm" :rules="addcateformRules" ref="editFormRef" label-width="80px">
				<el-form-item label="分类名称" prop="cat_name">
					<el-input v-model="editForm.cat_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editUserInfo">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//商品分类的列表
				catelist: [],
				//分页条件
				querInfo: {
					type: 3,
					pagenum: 1,
					pagesize: 5
				},
				//总数据条数
				total: 0,
				//为table指定列的名称
				columns: [{
					label: '分类名称',
					prop: 'cat_name',
				}, {
					label: '是否有效',
					type: 'template',
					template: 'isok'
				}, {
					label: '排序',
					type: 'template',
					template: 'order'
				}, {
					label: '操作',
					type: 'template',
					template: 'opt'
				}],
				addCateDialogVisible: false,
				addcateform: {
					cat_name: '',
					cat_pid: 0,
					//默认1级分类
					cat_level: 0

				},
				addcateformRules: {
					cat_name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}]
				},
				//父级分类的列表
				parentCateList: [],
				//指定选择器的配置对象
				cascaderProps:{
					value:'cat_id',
					label:'cat_name',
					children:'children'
				},
				//选中的id数组
				selectedKeys:[],
				//修改分类对话框的显示与隐藏
				editDialogVisible: false,
				editForm: {}
				
			}
		},
		created() {
			this.getCateList();
		},
		methods: {
			async getCateList() {
				const {
					data: res
				} = await this.$http.get('categories', {
					params: this.querInfo
				})
				if (res.meta.status !== 200) {
					return this.$message.error(res.meta.msg);
				}
				//this.$message.success(res.meta.msg);
				//把数据列表给catelist
				this.catelist = res.data.result;
				this.total = res.data.total;
			},
			//监听pagesize的改变
			handleSizeChange(newSize) {
				this.querInfo.pagesize = newSize;
				this.getCateList();
			},
			//监听 pagenum的改变
			handleCurrentChange(newPage) {
				this.querInfo.pagenum = newPage;
				this.getCateList();
			},
			showaddCateDialog() {
				//先获取父级分类的数据
				this.getParentCateList();
				//展示对话框
				this.addCateDialogVisible = true;
			},
			//获取父级分类数据列表
			async getParentCateList() {
				const {
					data: res
				} = await this.$http.get('categories', {
					params: {
						type: 2
					}
				});
				if (res.meta.states) {
					return this.$message.error(res.meta.msg);
				}
				//console.log(res)
				this.parentCateList = res.data;
			},
			//选择发生变化触发
			parentCateChange(){
				if(this.selectedKeys.length>0){
				  this.addcateform.cat_pid =this.selectedKeys[this.selectedKeys.length-1];
				  this.addcateform.cat_level=this.selectedKeys.length;
				  return
				}else{
					this.addcateform.cat_pid =0;
					this.addcateform.cat_level=0;
				}
			},
			//添加新的分类
			addCate(){
				//console.log(this.addcateform)
				this.$refs.addcateformRef.validate(async valid=>{
					if(!valid) return;
					const{data:res}=await this.$http.post('categories',this.addcateform);
					if(res.meta.status!==201){
						return this.$message.error(res.meta.msg);
					}
					this.$message.success(res.meta.msg);
					this.getCateList();
					this.addCateDialogVisible=false;
				});
				
			},
			//清空添加数据表格
			addCateDialogClose(){
				this.$refs.addcateformRef.resetFields();
				this.selectedKeys=[];
				this.addcateform.cat_level=0;
				this.addcateform.cat_pid=0;
			},
			//修改分类对话框的关闭事件
			editDialogClosed() {
				this.$refs.editFormRef.resetFields()
			},
			//展示编辑分类的对话框
			async showEditDialong(cat_id) {
				 //console.log(cat_id);
				const {
					data: res
				} = await this.$http.get('categories/' + cat_id)
				if (res.meta.status !== 200) {
					return this.$message.error('查询分类信息失败！')
				}
				this.editForm = res.data
				this.editDialogVisible = true
			}
			,
			//修改分类信息
			editUserInfo() {
				this.$refs.editFormRef.validate(async valid => {
					//console.log(valid);
					if (!valid) return
					//发起修改分类信息的数据请求
					const {
						data: res
					} = await this.$http.put('categories/' + this.editForm.cat_id, {
						cat_name: this.editForm.cat_name
					})
					if (res.meta.status !== 200) {
						return this.$message.error('更新分类信息失败！')
					}
			
					//关闭对话框
					this.editDialogVisible = false
					//刷新数据列表
					this.getCateList()
					//提示修改成功
					this.$message.success('更新分类信息成功！')
				})
			},
			//根据id删除对应的分类信息
			async removeUserById(id) {
				//弹框询问分类是否删除数据
				const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				// console.log(confirmResult);
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const {
					data: res
				} = await this.$http.delete('categories/' + id)
				if (res.meta.status !== 200) {
					return this.$message.error('删除分类失败！')
				}
				this.$message.success('删除分类成功！')
				this.getCateList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.treeTable {
		margin-top: 15px;
	}
	.el-cascader{
			width: 100%;
		}
</style>
